<template>
  <div class="box">
    <van-cell-group >
      <div class="card-head">
        <div class="userimg">
          <div class="img"><img src="@/assets/image/man.svg" /></div>
          <div class="username">
            <div class="name">
              <span>{{data.name}}</span>
              <span class="tag">
                <van-tag round plain size="medium" type="success">{{data.valiflag?'有效':'失效'}}</van-tag>
              </span>
            </div>
            <div class="userid">工号：{{data.id}}</div>
          </div>
        </div>
      </div>
    </van-cell-group>
  <van-form>
    <van-cell-group  class="block" >
      <VantPicker
          pickerType = "picker"
          label="角色"
          :columns="columns"
          :modelLabel="data.role"
      />
      <VantPicker
          pickerType = "picker"
          label="所属部门"
          :columns="columns"
          :modelLabel="data.dep"
      />
      <VantPicker
          pickerType = "picker"
          label="邮箱"
          :modelLabel="data.mail"
      />
      <VantPicker
          pickerType = "datePicker"
          label="出生日期"
          :modelLabel="data.birthday"
      />
      <VantPicker
          pickerType = "picker"
          label="统一认证号"
          :modelLabel="data.num"
      />
    </van-cell-group>
    <van-cell-group  class="block">
      <van-field name="switch" label="是否禁用">
        <template #right-icon>
          <van-switch size="15px" v-model="checked" />
        </template>
      </van-field>
      <van-field
          readonly
          name="picker"
          label="重置密码"
      >
        <template #right-icon>
          重置
        </template>
      </van-field>
    </van-cell-group>
    <div class="block">
      <van-button block >
        账号解锁
      </van-button>
    </div>
    <div class="block">
      <van-button block>
        置为失效
      </van-button>
    </div>
  </van-form>
  </div>
</template>

<script setup lang="ts">
import VantPicker from "@/components/VantPicker.vue";
const data = {
  name:'孟浩然',
  valiflag:true,
  id:'0072324',
  role:'分公司运营负责人,管理员',
  dep:'客服部/江苏常州',
  mail:'123456@163.com',
  birthday:'1980-12-06',
  num:'-',
  disable:true,
}
const columns = [
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
];
const checked = ref(false);

</script>

<style scoped lang="scss">
.card-head {
  height: 40px;
  padding: 12px;
  //border-bottom: 1px solid #f0f0f0;
  .userimg {
    height: 40px;
    display: flex;
    align-items: center;
    .img {
      margin-right: 8px;
      height: 40px;
      width: 40px;
    }
    .username {
      .name {
        display: flex;
        align-items: center;
        .tag {
          margin-left: 12px;
        }
      }
      .userid {
        margin-top: 2px;
        font-size: 12px;
        color: #999999;
      }
    }
    .viewInfo {
      font-size: 12px;
      color: #2e7df3;
      position: absolute;
      right: 30px;
    }
  }
  .uesrInfo {
    margin-left: 47px;
    font-size: 14px;
    margin-top: 12px;
    color: #666666;
  }
}
</style>
